<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <div id="demo"></div>
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./react-eno.js"></script>
    <!-- 生产环境中不建议使用 -->
    <!-- <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script>
        window.WeElement = React.Component;
window.h = React.createElement;

define = (ComponentName, componentClass) => {
  console.log(ComponentName, componentClass);
  ReactDOM.render(
    h("div", null, h(componentClass, null)),
    document.querySelector("#demo")
  );
};

const style = "a{color:red}";

class myEno extends WeElement {
  constructor(...args) {
    super(...args);
    this.state = {
      name: "yao"
    };
  }

  render() {
    return h(
      "div",
      null,
      this.state.name,
      h(
        "button",
        {
          onClick: this.testClick.bind(this)
        },
        "ok"
      )
    );
  }

  componentDidMount() {
    console.log("LifeCycle");
  }

  testClick() {
    this.setState({
      name: "jing"
    });
  }
}

myEno.css = `div{color:red}div p{font-size:14px}`;
define("my-eno", myEno);




    </script>
</body>

</html>